<template>
  <Row class="video-device-detail">
    <Col span="12" class="clo_14">
    <div class="v-d-14-head">
      <Row style="height: 100px;">
        <Col span="12">
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width:80px;">设备ID&nbsp;:</dt>
          <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
            {{baseInfo.deviceId}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width:80px;">设备位置&nbsp;:</dt>
          <dd class="basicInfo-item value" style="width: calc(100% - 80px);" title="selectRow.location">
            {{baseInfo.location}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width:80px;">当前状态&nbsp;:</dt>
          <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
            <Tag color="green" v-show="baseInfo.deviceStatus==1">正常</Tag>
            <Tag color="red" v-show="baseInfo.deviceStatus==2">告警</Tag>
            <Tag color="#909399" v-show="baseInfo.deviceStatus !==1 && baseInfo.deviceStatus !==2">未知</Tag>
          </dd>
        </dl>
        </Col>
        <Col span="12">
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width:80px;">设备名称&nbsp;:</dt>
          <dd class="basicInfo-item value autocut" :title="baseInfo.name" style="width: calc(100% - 80px);">
            {{baseInfo.deviceName}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width:80px;">更新时间&nbsp;:</dt>
          <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
            {{updateTime}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width:80px;">是否在线&nbsp;:</dt>
          <dd class="basicInfo-item value" style="width: calc(100% - 80px);">
            <Tag color="success" v-if="baseInfo.onlineState">在线</Tag>
            <Tag color="error" v-else>离线</Tag>
          </dd>
        </dl>
        </Col>
      </Row>
    </div>
    <div class="v-d-14-body" :class="{'height':!searchData.type}">
      <Card style="width: 100%;overflow: hidden;">
        <div style="width:100%;overflow: hidden;">
          <Col :span="24">
          <DatePicker size="small" :options="options" v-model="searchData.date" type="date" placeholder="选择时间" @on-change="changeTime" style="width: 200px" :clearable="false" />
          <Select size="small" @on-change="typeChange" clearable placeholder="参数类型" v-model="searchData.type" style="width:200px">
            <Option v-for="item in typeLists" :value="item.value" :key="item.value">{{ item.type }}</Option>
          </Select>
          </Col>
          <Col :span="24" style="margin-top:10px;">
          <Table :columns="columns" :data="tabelDatas" border :loading="pageInfo.loading"></Table>
          </Col>
          <Col class="panel page-panel cf" :span="24" style="margin-top: 10px;height: auto;padding: 5px 10px;box-shadow: none;">
          <Page :total="pageInfo.total" size="small" :page-size="15" :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging"></Page>
          </Col>
        </div>
      </Card>
    </div>
    </Col>
    <Col span="12" class="col_10">
    <div class="v-d-10-body">
      <div class="box" :class="{'center':searchData.type == 1}" id="temp-box-1" v-if="searchData.type==1 || !searchData.type"></div>
      <div class="box" :class="{'center':searchData.type == 2}" id="temp-box-2" v-if="searchData.type==2 || !searchData.type"></div>
    </div>
    </Col>
  </Row>
</template>
<script>
import { getOdDetail, getOdDate } from "@/api";
const types = [
  {
    type: "温度",
    value: 1
  },
  {
    value: 2,
    type: "湿度"
  },
  {
    value: 3,
    type: "电压"
  }
];

const chartsOption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      animation: true,
      label: {
        backgroundColor: "#505765"
      }
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "5%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: "#ccc"
      }
    },
    axisLabel: {
      color: "#333"
    }
  },
  yAxis: {
    type: "value",
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: "#ccc"
      }
    },
    axisLabel: {
      color: "#333"
    },
    nameTextStyle: {
      color: "#333"
    }
  },
  series: [
    {
      data: [],
      type: "line",
      smooth: true,
      symbol: "rect",
      hoverAnimation: false,
      symbolSize: 6,
      showSymbol: false
    }
  ]
};
const addWindowResize = (item, item1) => {
  if (!!item && !!item1) {
    window.onresize = () => {
      item.resize();
      item1.resize();
    };
  } else if (!!item) {
    window.onresize = () => {
      item.resize();
    };
  } else if (!!item1) {
    window.onresize = () => {
      item1.resize();
    };
  }
};
let echartInstanceHum = null;
let echartInstanceTem = null;
export default {
  props: ["id"],
  mounted() {
    this._getOdDetail();
    this._getOdDate();
  },
  beforeDestroy() {
    window.onresize = null;
  },
  watch: {
    id() {
      this._getOdDetail();
    }
  },
  data() {
    const vm = this;
    return {
      options: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        }
      },
      typeLists: [...types],
      // 设备基本信息
      baseInfo: {},

      // 分页信息
      pageInfo: {
        total: 0,
        page: 1,
        loading: false
      },
      updateTime: "",
      pointList: [],
      searchData: {
        type: null,
        date: new Date()
      },
      tabelDatas: [],
      chartMap: [],
      columns: [
        {
          title: "参数名",
          align: "center",
          key: "param"
        },
        {
          title: "参数值",
          align: "center",
          key: "value"
        },
        {
          title: "更新时间",
          align: "center",
          key: "date"
        }
      ]
    };
  },

  methods: {
    _getOdDetail() {
      const vm = this;
      let params = {
        id: vm.id
      };
      getOdDetail(params).then(res => {
        if (res.code == 200) {
          const { data } = res;
          vm.baseInfo = data;
        }
      });
    },

    _getOdDate() {
      const vm = this;
      const type = vm.searchData.type;
      let date = !!vm.searchData.date
        ? vm.moment(vm.searchData.date).format("YYYY-MM-DD")
        : null;
      let params = {
        page: vm.pageInfo.page,
        date,
        size: 15,
        type,
        id: vm.id
      };
      vm.pageInfo.loading = true;
      getOdDate(params).then(res => {
        if (res.code === 200) {
          if (!res.data) {
            vm.tabelDatas = [];
            vm.pageInfo.total = 0;
            vm.pageInfo.loading = false;
            vm.updateTime = "";
            return false;
          }
          const { showList } = res.data;
          vm.updateTime = res.data.updateTime;
          vm.tabelDatas = !showList ? [] : showList;
          vm.pageInfo.total = res.data.total;
          vm._drawCharts(res.data, type, date);
          setTimeout(_ => {
            vm.pageInfo.loading = false;
          }, 500);
        } else {
          setTimeout(_ => {
            vm.pageInfo.loading = false;
          }, 500);
        }
      });
    },

    // 根据选择的参数类型绘制图片
    _drawCharts(res, type, date) {
      const vm = this;
      const { tempArray, dateArray, humiArray } = res;
      if (type === 1) {
        vm._drawChartsTemp(dateArray, tempArray, date);
      } else if (type === 2) {
        vm._drawChartsHum(dateArray, humiArray, date);
      } else if (!type) {
        vm._drawChartsTemp(dateArray, tempArray, date);
        vm._drawChartsHum(dateArray, humiArray, date);
      }

      setTimeout(_ => {
        addWindowResize(echartInstanceHum, echartInstanceTem);
      }, 1000);
    },

    // 时间选择器change事件
    changeTime() {
      const vm = this;
      vm.pageInfo.page = 1;
      vm._getOdDate();
    },

    // 参数类型change事件
    typeChange(value) {
      const vm = this;
      vm.pageInfo.page = 1;
      vm._getOdDate();
    },

    // 温度图
    _drawChartsTemp(timeArray, temArray, date) {
      if (!timeArray || !temArray) {
        if (!!echartInstanceTem) {
          echartInstanceTem.clear();
        }
        return false;
      }

      const vm = this;
      let option = JSON.parse(JSON.stringify(chartsOption));
      option.color = ["#B55CBD"];
      option.yAxis.name = "℃";
      option["title"] = {
        text: "温度曲线图",
        subtext: date,
        x: "center",
        align: "right"
      };
      vm.$nextTick(_ => {
        echartInstanceTem = vm.echarts.init(
          document.getElementById("temp-box-1")
        );
        option.xAxis.data = timeArray;
        option.series[0]["name"] = "温度";
        option.series[0].data = temArray;
        echartInstanceTem.setOption(option);
      });
    },

    // 湿度图
    _drawChartsHum(timeArray, humArray, date) {
      if (!timeArray || !humArray) {
        if (!!echartInstanceHum) {
          echartInstanceHum.clear();
        }
        return false;
      }
      const vm = this;
      let option = JSON.parse(JSON.stringify(chartsOption));
      option.color = ["#668ED6"];
      option.yAxis.name = "%RH";
      option["title"] = {
        text: "湿度曲线图",
        subtext: date,
        x: "center",
        align: "right"
      };

      vm.$nextTick(_ => {
        echartInstanceHum = vm.echarts.init(
          document.getElementById("temp-box-2")
        );
        option.xAxis.data = timeArray;
        option.series[0]["name"] = "湿度";
        option.series[0].data = humArray;
        echartInstanceHum.setOption(option);
      });
    },

    switchThePaging(index) {
      const vm = this;
      vm.pageInfo.page = index;
      vm._getOdDate();
    }
  }
};
</script>
